<template>
	<div class="margin-top">
		<Header @changeLanguage="changeLanguage" />
		<Title :pageName="title" />
		<div class="container">
			<div class="module">
				<SubTitle :pageName="sub_title1" :inline="true" />
				<img src="../assets/file-1.png" @click="toList(1)" />
				<div class="list">
					<div class="item" v-for="(item, index) in fiel1" :key="index">
						<a :href="item.path" target="_blank">
							<div class="name">• {{ item.name }}</div>
							<div class="date">{{ item.date }}</div>
						</a>
					</div>
				</div>
				<div class="more" @click="toList(1)">{{ more }}</div>
			</div>

			<div class="module module-left">
				<SubTitle :pageName="sub_title2" :inline="true" />
				<img src="../assets/file-2.png" @click="toList(2)" />
				<div class="list">
					<div class="item" v-for="(item, index) in fiel2" :key="index">
						<a :href="item.path" target="_blank">
							<div class="name">• {{ item.name }}</div>
							<div class="date">{{ item.date }}</div>
						</a>
					</div>
				</div>
				<div class="more" @click="toList(2)">{{ more }}</div>
			</div>

			<div class="module module-left">
				<SubTitle :pageName="sub_title3" :inline="true" />
				<img src="../assets/file-3.png" @click="toList(3)" />
				<div class="list">
					<div class="item" v-for="(item, index) in fiel3" :key="index">
						<a :href="item.path" target="_blank">
							<div class="name">• {{ item.name }}</div>
							<div class="date">{{ item.date }}</div>
						</a>
					</div>
				</div>
				<div class="more" @click="toList(3)">{{ more }}</div>
			</div>

			<div class="module">
				<SubTitle :pageName="sub_title4" :inline="true" />
				<img src="../assets/file-4.jpg" @click="toList(4)" />
				<div class="list">
					<div class="item" v-for="(item, index) in fiel4" :key="index">
						<a :href="item.path" target="_blank">
							<div class="name">• {{ item.name }}</div>
							<div class="date">{{ item.date }}</div>
						</a>
					</div>
				</div>
				<div class="more" @click="toList(4)">{{ more }}</div>
			</div>

			<div class="module module-left">
				<SubTitle :pageName="sub_title5" :inline="true" />
				<img src="../assets/file-5.png" @click="toList(5)" />
				<div class="list">
					<div class="item" v-for="(item, index) in fiel5" :key="index">
						<a :href="item.path" target="_blank">
							<div class="name">• {{ item.name }}</div>
							<div class="date">{{ item.date }}</div>
						</a>
					</div>
				</div>
				<div class="more" @click="toList(5)">{{ more }}</div>
			</div>
		</div>
		<Footer />
	</div>
</template>

<script>
	import {
		file,
		project,
		more
	} from "@/lang";
	import Header from "@/components/Header";
	import Title from "@/components/Title";
	import Footer from "@/components/Footer";
	import SubTitle from "@/components/SubTitle";
	import {
		getFile
	} from "@/api";
	export default {
		name: "file",
		components: {
			Header,
			Title,
			Footer,
			SubTitle,
		},
		data() {
			return {
				langCode: "",
				file: file,
				project: project,
				title: "",
				more: "",
				langMore: more,
				sub_title1: "",
				sub_title2: "",
				sub_title3: "",
				sub_title4: "",
				sub_title5: "",
				fiel1: [],
				fiel2: [],
				fiel3: [],
				fiel4: [],
				fiel5: [],
				list: [{
						name: "测试一下",
						date: "2021-09-19",
						type: 1,
					},
					{
						name: "测试一下",
						date: "2021-09-19",
						type: 2,
					},
					{
						name: "测试一下",
						date: "2021-09-19",
						type: 3,
					},
					{
						name: "测试一下",
						date: "2021-09-19",
						type: 4,
					},
					{
						name: "测试一下",
						date: "2021-09-19",
						type: 5,
					},
				],
			};
		},
		created() {
			const lang = localStorage.getItem("lang");
			this.langCode = lang === "ZH" ? 0 : 1;
			this.setPageLanguage(lang);
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				const res = await getFile({
					lang: self.langCode,
				});
				for (const item in res) {
					res[item].forEach((ite) => {
						ite["path"] = `${process.env.VUE_APP_BASE_API}/${ite.file}`;
					});
				}
				this.fiel1 = res.file_1;
				this.fiel2 = res.file_2;
				this.fiel3 = res.file_3;
				this.fiel4 = res.file_4;
				this.fiel5 = res.file_5;
				console.log(res);
			},
			setPageLanguage(_lang) {
				const lang = _lang.toLowerCase();
				this.title = this.file.title[lang];
				this.sub_title1 = this.project.sub_title[0][lang];
				this.sub_title2 = this.project.sub_title[1][lang];
				this.sub_title3 = this.project.sub_title[2][lang];
				this.sub_title4 = this.project.sub_title[3][lang];
				this.sub_title5 = this.project.sub_title[4][lang];
				this.more = this.langMore[lang];
			},
			changeLanguage(lang) {
				this.langCode = lang === "ZH" ? 0 : 1;
				this.setPageLanguage(lang);
				this.getData();
			},
			toList(type) {
				this.$router.push({
					path: "/file_list",
					query: {
						type: type,
					},
				});
			},
			toDetails(item) {
				localStorage.setItem("details", JSON.stringify(item));
				this.$router.push({
					path: "/details_page",
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.container {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;

		.module {
			width: 386px;

			img {
				width:100%;
				cursor: pointer;
			}
		}

		.module-left {
			margin-left: 20px;
		}
	}

	.list {
		margin-top: 10px;
		margin-bottom: 15px;
		.item {
			.name{
				width:290px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			a {
				display: block;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				color: #474747;
				line-height: 1.8;
			}

			a:hover .name{
				color: #255389;
				text-decoration: underline;
			}
		}
	}

	.more {
		text-align: right;
		color: #255389;
		font-weight: 600;
		cursor: pointer;
	}

	.more:hover {
		text-decoration: underline;
	}
</style>
